<template>
    <div class="shop_details">
        <!-- 产品轮播图 -->
        <div class="swiper_box">
           <van-swipe :autoplay="3000" indicator-color="#f2890d">
                <van-swipe-item v-for="(item, index) of swiperList" :key='index'>
                    <a :href="item._url">
                        <img :src="item._src" />
                    </a>
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 产品信息 -->
        <div class="shop_info">
            <div class="coupon_price flex-box">
               <div class="my_platform_price">
                    <span>券后价&yen; </span>
                    <span class="price"> 20.2</span>
               </div>
               <div class="platform_price flex-box">
                   <div>
                       <span>天猫价&yen;</span>
                        <span class="line_text">29.5</span>
                   </div>
                   <div class="total">
                       已售:1.2万
                   </div>
               </div>
            </div>
            <div class="shop_name">
                <span class="shop_from">天猫</span>
                <span>覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的</span>
            </div>
            <div class="store_name">啦啦旗舰店</div>
        </div>
        <!-- 领券 -->
        <div class="coupon_box">
            <div class="coupon_continer flex-box">
                <div class="coupon_price">
                    <div class="title">15元优惠券</div>
                    <div class="user_date">使用日期: 2019.12.1 - 2020.1.2</div>
                </div>
                <div class="receive_btn">立即领取&gt;</div>
            </div>
        </div>
        

        <div class="introd_text">推荐商品:</div>
        <div class="shop_box">
            <div class="shop_list_item flex-box" v-for="(item, index) of goodsList" :key="index">
                <div class="shop_cover">
                    <img :src="item.cover" alt="">
                </div>
                <div class="shop_info">
                    <div class="shop_base_info">
                        <div class="shop_title clamp-2">{{item.name}}</div>
                        <div class="shop_store flex-box">
                            <div class="shop_store_name">{{item.store_name}}</div>
                            <div class="shop_store_name">已抢: {{item.num}}万件</div>
                        </div>
                        <div class="shop_dist">
                            <div class="shop_dist_money"></div>
                            <div class="shop_coupon_money"></div>
                        </div>
                    </div>
                    <div class="shop_price_info flex-box">
                        <div>券后价  &yen;<span class='price'>{{item.dist_price}}</span></div>
                        <div class="real_price_text">原价: &yen;{{item.real_price}}</div>
                    </div>
                    <div class="coupon_price">券{{item.coupon_price}}元</div>
                </div>
            </div>
        </div>


        <!-- 去领券 -->
        <div class="footer_coupon flex-box">
            <div class="footer_coupon_box flex-box">
                <div class="footer_coupon_item">
                    <dd>
                        <img src="@/assets/image/collect_icon.png" alt="">
                    </dd>
                    <dt>首页</dt>
                </div>
                <div class="footer_coupon_item">
                    <dd>
                      <img src="@/assets/image/collect_icon.png" alt="">
                    </dd>
                    <dt>收藏</dt>
                </div>
            </div>
            <div class="recvice_buy">领券购买</div>
        </div>

        
    </div>
</template>

<script>
export default {
   name: 'shop_details',
   data() {
       return {
            swiperList:[
                {
                    _url: 'kkkkk',
                    _src:  'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg'
                },
                {
                    _url: 'kkkkk',
                    _src:  'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2852083094,372235004&fm=26&gp=0.jpg'
                },
                {
                    _url: 'kkkkk',
                    _src:  'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&fm=26&gp=0.jpg'
                },
            ],
                goodsList:[
                    {
                        id:'393939',
                        cover:'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3437217665,1564280326&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                    {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                     {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                     {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    },
                     {
                        id:'3939139',
                        cover:'https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2168486239,1962133587&fm=26&gp=0.jpg',
                        name: '覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的覅上的飞机附近的',
                        store_name: '啦啦旗舰店',
                        num:23,
                        dist_price: 121,
                        real_price: 214,
                        coupon_price:90
                    },
                    {
                        id:'393939',
                        cover:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3646403421,3376537021&fm=26&gp=0.jpg',
                        name: '大熊猫咪',
                        store_name: '大熊猫旗舰店',
                        num:12,
                        dist_price: 12,
                        real_price: 24,
                        coupon_price:20
                    }
                ]
       }
   }
}
</script>

<style scoped lang="less">
    .shop_details {
        background-color: #F5F5F5;
        .swiper_box img{
            width: 100%;
            height: 20rem;
        }
        .shop_info{
            position: relative;
            font-size: 1.2rem;
            padding:1.2rem;
            padding-bottom: 2.4rem;
            background-color: #fff;
            .shop_from{
                margin-right: 1rem;
                padding: 0 .2rem;
                // background-color: #f2890d;
                color:#f2890d;
                font-size: 1.2rem;
                border:.1rem solid #f2890d;
                border-radius: .2rem;
            }
            .store_name {
                position: absolute;
                bottom:.5rem;
                right:2rem;
                font-size: 1.4rem;
            }
            font-size: 1.2rem;
            .coupon_price{
                &.flex-box{
                    justify-content: space-between;
                }
                padding-bottom: 1rem;
                color:#f2890d;
                font-size: 1.2rem;
                .price{
                    padding-left: .6rem;
                    font-size: 2.2rem;
                    font-weight: bold;
                }
                .line_text{
                    text-decoration: line-through;
                }
                .platform_price{
                    color:#ccc;
                    .line_text{
                        padding-left: 1rem;
                    }
                    .total {
                        padding-left: 2rem;
                    }
                }
            }
        }
        .introd_text {
            position: relative;
            padding:0 1.2rem 1.2rem 1.8rem;
            font-size: 1.4rem;
            &:after {
                position: absolute;
                top:.2rem;
                left:1rem;
                content: '';
                display: block;
                height:1.4rem;
                width:.3rem;
                background-color: #f2890d;

            }
        }
        
        .coupon_box {
            padding:1.2rem;
            color:#fff;
            background-color: #fff;
            font-size: 1.4rem;
            border-top:1rem solid #F5F5F5;
            border-bottom:1rem solid #F5F5F5;
            .coupon_continer {
                padding:1.5rem;
                border-radius: .5rem;
                &.flex-box{
                    justify-content: space-between;
                }
                background: linear-gradient(to right, #f9ba6f, #f2890d);
                .coupon_price{
                    flex:1;
                    text-align: center;
                    .title{
                        font-size: 2rem;
                        font-weight: bold;
                    }
                }
                .receive_btn{
                    flex-basis: 7rem;
                    font-size: 1.4rem;
                    font-weight: bold;
                    text-align: right;
                }
            }
        }
        .footer_coupon {
            padding: .6rem 1.2rem;
            background-color: #fff;
            &.flex-box{
                justify-content: space-between;
            }
            position: fixed;
            bottom: 0rem;
            left:0;
            width:100%;
            z-index:999;
            .footer_coupon_item {
                flex:1;
                text-align: center;
                img {
                    width:2.5rem;
                }
            }
            .footer_coupon_box {
               flex-basis: 14rem;
            }
            .recvice_buy{
                flex:1;
                text-align: center;
                padding:1rem 1.5rem;
                background: #ff8a00;
                border-radius: 2rem;
                color:#fff;
                font-weight: bold;
                font-size: 1.4rem;
            }
        }
    }

      .shop_box{
            padding:0 1.2rem;
            .shop_list_item{
                margin-top:.8rem;
                padding:0 0 0 1.2rem;
                background-color: #fff;
                border-radius: .5rem;
                &.flex-box {
                    align-items: center;
                }
                &:first-child{
                    margin-top:0;
                }
            }
            .shop_cover {
                flex-basis: 8rem;
                height: 8rem;
                img {
                    width:100%;
                    height: 100%;
                    border-radius: .5rem;
                }

            }
            .shop_info{
                padding:.5rem;
                overflow: hidden;
                position: relative;
                padding-left: .6rem;
                flex:1;
                .shop_title {
                    position: relative;
                    top:-.4rem;
                    padding-top:1.2rem;
                    padding-right: 4rem;
                    font-size: 1.2rem;
                    color:#333;
                }
                .shop_store.flex-box {  
                    justify-content: space-between;
                }
                .shop_price_info.flex-box {
                    position: relative;
                    top:-.4rem;
                    justify-content: space-between;
                    color:#f2890d;
                    font-size: 1.2rem;
                    font-weight: bold;
                    .real_price_text {
                        color:#ccc;
                        font-weight: normal;
                        text-decoration: line-through;
                    }
                    .price {
                        font-size: 1.8rem;
                    }
                }
                .shop_store_name {
                    padding-top:.6rem;
                    padding-bottom: .4rem;
                    font-size: 1.2rem;
                    color:#ccc;
                }
                .coupon_price{
                    position: absolute;
                    right: -2.4rem;
                    top:.6rem;
                    width:8rem;
                    height: 2rem;
                    line-height: 2rem;
                    color:#fff;
                    text-align: center;
                    background-color: #f2890d;
                    font-size: 1.2rem;
                    transform: rotate(45deg) scale(.8);
                }
            }
        }
</style>
